<template>
	<view class="">
		<view class="hp_info_share" style="width: 100%;height: 20px;background-color:#fff;position: relative;">
			<view class=""
				style="height: 20px;background-color: #fff;width: 100px;position: absolute;right: 10px;text-align: right;"
				@click="share_fn()">
				<image src="/static/share.png" mode="" style="width: 20px;height: 20px;position: absolute;right: 30px;">
				</image>
				<text style=''>分享</text>
			</view>
		</view>
		<view class="hp_page">

			<view class="Warehousing_info" style="position: relative;">
				<text
					style="position: absolute;width: 3px;height: 15px;background-color:#fccc04;top: 22px;left: 0;"></text>
				<view class="hp_info_list">
					<view class="title">
						<text style="font-size: 15px;font-weight: 600;line-height: 40px;">货品入库信息</text>
					</view>
					<view class="hp_number">
						<view class="hp_number-left">
							<view class="info_important">入库货品编号</view>
							<view style="font-size: 12px;color: gainsboro;">货品编号唯一</view>
						</view>
						<view class="hp_number-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 60px;line-height: 60px;">
								{{hp_info_list.hp_code}}
							</view>
						</view>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="info_important">入库货品名称</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								{{hp_info_list.hp_name}}
							</view>
						</view>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="info_important">货品类别</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								{{hp_info_list.hp_name}}
							</view>
						</view>
					</view>
					<view class="Category-options" v-show="isState==true ? true:false">
						<text class="option">动漫手办</text><text class="option">小说</text><text
							class="option">游戏</text><text class="option">游戏周边</text><text class="option">漫画书</text>
						<text class="option">汉服</text><text class="option">cosplay服装/道具</text><text
							class="option">+</text>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="info_important">货品数量</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								{{hp_info_list.hp_num}}
							</view>
						</view>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="">货品颜色</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								{{hp_info_list.hp_color}}
							</view>
						</view>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="">货品尺码</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								{{hp_info_list.hp_size}}
							</view>
					</view>
				</view>
				<view class=" hp_name">
							<view class="hp_name-left">
								<view class="">货品价格</view>
							</view>
							<view class="hp_name-right">
								<view
									style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
									{{hp_info_list.hp_price}}
								</view>
							</view>
						</view>
						<view class="hp_name">
							<view class="hp_name-left">
								<view class="">上架时间</view>
							</view>
							<view class="hp_name-right">
								<view
									style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
									{{hp_info_list.hp_sj_time}}
								</view>
							</view>
						</view>
						<uni-section title="货品图片">
							<view class="example-body ">
								<uni-file-picker readonly :value="fileLists" file-mediatype="image">
								</uni-file-picker>

							</view>
						</uni-section>
					</view>
				</view>
				<view class="other_info" style="position: relative;">
					<text
						style="position: absolute;width: 3px;height: 15px;background-color:#fccc04;top: 12px;left: 0;"></text>
					<view class="title">
						<text style="font-size: 15px;font-weight: 600;line-height: 40px;">其他信息</text>
					</view>
					<view class="hp_name">
						<view class="hp_name-left">
							<view class="">供货商姓名</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								{{hp_info_list.supplier_name}}
							</view>
						</view>
					</view>
					<view class="hp_name" style="border: 0;">
						<view class="hp_name-left">
							<view class="">供货商电话</view>
						</view>
						<view class="hp_name-right">
							<view
								style="width: 70%;position: absolute;right: 0;text-align: right;height: 40px;line-height: 40px;">
								{{hp_info_list.supplier_phone}}
							</view>
						</view>
					</view>
				</view>
				<view class="remarks" style="position: relative;">
					<text
						style="position: absolute;width: 3px;height: 15px;background-color:#fccc04;top: 12px;left: 0;"></text>
					<view class="title">
						<text style="font-size: 15px;font-weight: 600;line-height: 40px;">备注</text>
					</view>
					<textarea style="width: 80%;" cols="30" rows="10" placeholder="请输入" :value="hp_info_list.other_info"
						placeholder-style="font-size:12px"></textarea>
					<button
						style="width: 60px;height: 60px;border-radius: 50%;background-color: #fccc04;position: absolute;right: 0;top: 40px;font-size: 12px;line-height: 20px;padding-top: 10px;font-weight: 500;">继续入库</button>
				</view>
				<button style="margin-top: 10px;background-color: #fccc04;width: 700rpx;"
					@click="delete_fn()">打印出库单</button>
			</view>
			<view class=""
				style="width: 100%;height: 50px;display: flex;line-height: 50px;text-align: center;font-size: 20px;position: absolute;bottom: 0;">
				<view class=""
					style="width: 100%;height: 50px;display: flex;line-height: 50px;text-align: center;font-size: 20px;position: absolute;bottom: 0;">
					<view class="" style="flex-grow: 1;height: 50px;background-color: #fcec04;">修改</view>
					<view class="" style="flex-grow: 1;height: 50px;background-color:#fccc04 ;">复制</view>
					<view class="" style="flex-grow: 1;height: 50px;background-color:#de0a0a;color: white;">
						<button class="button popup-success" @click="dialogToggle('success')"
							style="height: 50px;width: 100%;border-radius: 0;background-color: #de0a0a;color: white;"><text
								class="button-text success-text">删除</text></button>
					</view>
				</view>
				<uni-popup ref="yyy" type="dialog">
					<uni-popup-dialog cancelText="取消" confirmText="确认" content="确认要删除货品吗？" @close="close"
						@confirm="confirm"></uni-popup-dialog>
				</uni-popup>
			</view>

			<uni-popup ref="xxx" type="share">
				<view class="" style="width: 100%;height: 250px;background-color: #fff;">
					<view class="" style="height: 200px;width: 100%;background-color: gainsboro;display: flex;">
						<view class="" style="width: 50%;height: 160px;text-align: center;">
							<view class="" style="width: 100%;height: 160px;"><img src="/static/sharelinks.png" alt="" srcset="" style="width: 80px;height: 80px;margin-top: 60px;"></view>
							<view class="" style="font-size: 16px;margin-bottom: 10px;">
								分享群链接
							</view>
						</view>
						<view class="" style="width: 50%;height: 200px;text-align: center;">
							<view class="" style="width: 100%;height: 160px;"><img src="/static/storeCode.png" alt="" srcset="" style="width: 80px;height: 80px;margin-top: 60px;" @click="sx_fn()"></view>
							<view class="" style="font-size: 16px;margin-bottom: 10px;">
							     生成二维码
							</view>
						</view>
					</view>
					<view class="" style="width: 100%;height: 50px;font-size: 20px;text-align: center;">
						<text style="line-height: 50px;" @click="close_fn()">关闭</text>
					</view>
				</view>
			</uni-popup>
			<uni-popup ref="sx" type="share">
				<view class="" style="width: 80%;height: 460px;margin: 0 auto;margin-bottom: 200px;background-color: #fccc04;text-align: center;box-sizing: border-box;padding: 40px 30px;">
					<view class="" style="width: 100%;height: 300px;background-color: #fff;">
						<view class="" style="width:100%;height:140px;text-align: left;box-sizing: border-box;padding-left: 100rpx;padding-top: 40px;">
							<view class="" style="font-weight: 600;">货品名称：{{hp_info_list.hp_name}}</view>
							<view class="" style="font-weight: 600;">货品编号：{{hp_info_list.hp_code}}</view>
							<view class="" style="font-weight: 600;">上架时间：{{hp_info_list.hp_sj_time}}</view>	
						</view>
						<view class=""style="width:100%;height:160px;" >
							<image src="/static/qrcode.png" mode="" style="width: 130px;height: 130px;"></image>
						</view>
					</view>
					<view class="" style="margin-top: 30px;">
						<button style="background-color: #fff;">保存图片</button>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				isState: false,
				img_path: [],
				url: '',
				imageStyles: {
					width: 64,
					height: 64,

				},
				hp_info_list: '',
				fileLists: [

				]
			}
		},
		onLoad(option) {
			console.log(option.xx);
			var hp_code = option.xx;
			uni.request({
					url: 'http://localhost:3000/query',
					data: {
						'hp_code': hp_code
					},
					success: (res) => {
						console.log(res.data);
						this.img_path = res.data;
						console.log(this.img_path[0].url);
						for (var i = 0; i < this.img_path.length; i++) {
							this.$set(this.fileLists, i, {
								url: `http://localhost:3000/${this.img_path[i].url}`
							});
						}
						console.log(this.fileLists)
					}
				}),
				uni.request({
					url: 'http://localhost:3000/query_hp_info',
					data: {
						'hp_code': hp_code
					},
					success: (res) => {
						console.log(res.data);
						this.hp_info_list = res.data[0];
						console.log(this.hp_info_list)
					}
				})
		},
		methods: {
			qiehuan_fn() {
				if (this.isState == true) this.isState = false
				else this.isState = true
			},
			dialogClose() {
				console.log('点击关闭')
			},
			delete_fn() {
				this.$refs.yyy.open()
			},
			sx_fn(){
				this.$refs.sx.open();
				this.$refs.xxx.close()
			},
			share_fn() {
				this.$refs.xxx.open();
			},
			close_fn() {
				this.$refs.xxx.close()
			},
			close() {
				this.$refs.yyy.close()
			},
			confirm() {
				this.$refs.yyy.close()
			},
			dialogToggle(type) {
				this.msgType = type
				this.$refs.yyy.open()
			},
			dialogClose() {
				console.log('点击关闭')
			},
			dialogConfirm() {
				console.log('点击确认')
			}
		}

	}
</script>

<style lang="less">
	.hp_page {
		width: 100%;
		height: 744px;
		overflow: hidden;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 15px;

		.Warehousing_info {
			width: 700rpx;
			background-color: white;
			box-sizing: border-box;
			padding: 10px;

			.hp_number {
				width: 100%;
				height: 60px;
				display: flex;
				position: relative;
				border-bottom: 1px solid gainsboro;

				.hp_number-left {
					width: 40%;
					margin-top: 10px;

				}
			}

			.Category-options {
				width: 100%;
				border-bottom: 1px solid gainsboro;

				.option {
					display: inline-block;
					height: 25px;
					border: 1px solid gray;
					margin: 7px;
					box-sizing: border-box;
					padding: 0 5px;
					color: gray;
					line-height: 25px;
					border-radius: 3px;
				}
			}
		}
	}

	.other_info {
		margin-top: 10px;
		width: 700rpx;
		background-color: white;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.remarks {
		margin-top: 10px;
		width: 700rpx;
		height: 100px;
		background-color: white;
		box-sizing: border-box;
		padding: 0 10px;
	}

	.hp_name {
		width: 100%;
		height: 40px;
		position: relative;
		display: flex;
		border-bottom: 1px solid gainsboro;

		.hp_name-left {
			width: 40%;
			line-height: 40px;
		}
	}

	.title {
		width: 100%;
		height: 40px;
		border-bottom: 1px solid gainsboro;
	}

	.info_important {
		font-size: 14px;

		&::after {
			content: '*';
			color: red;
		}
	}
</style>
